<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>图片变换</title>
    <style>
        body {
            width: 99%;
            height: 745px;
            margin: 0 auto;
        }

        input {
            width: 100%;
            height: 30px;
            margin: 0 0 1% 0;
            font-weight: bolder;
            text-align: center;
            background: cornflowerblue;
            color: #000000;
        }

        .search {
            height: 20px;
            background: #ffffff;
            width: 100%;
            margin: 0 0 1% 0;
            text-align: left;
        }

        img {
            width: 48%;
            height: 320px;
            margin: 0 0 0 1%;
            border: 1px solid #7182fe;
        }

        #img0 {
            width: 100%;
            height: 100%;
            margin: auto auto;
        }

        #lou {
            width: 120px;
            height: 168px;
            margin-top: 320px;
            float: right;
            border: none;
        }

        #float_bg {
            width: 100%;
            height: 100%;
            margin: 1px auto
        }

        #PartA {
            width: 12%;
            height: 88%;
            background: #a4bfd4;
            float: left;
            border: 1px solid #bcbfd0;
            box-shadow: #a4bfd4;
        }

        #PartB {
            width: 87%;
            height: 88%;
            background: #a4bfd4;
            float: left;
            border: 1px solid #7093b8;
            box-shadow: #a4bfd4;
        }

        #PartC {
            width: 99%;
            height: 12%;
            background: #7a9dc3;
            float: left;
            border: 2px solid #7093b8;
            box-shadow: #6b8db2;
        }

        #search {
            width: 150px;
            margin: 10px 10px;
            padding: 0;
        }

        #logo {
            margin: 20px 0 0 2%;
            padding: 0;
            font-style: italic;
            float: left;
            font-size: 39px;
            font-family: 微软雅黑, sans-serif;
            text-shadow: 5px 2px 6px #FFFFFF;;
        }

        #standard {
            width: 150px;
            height: 30px;
            margin: 2% 0 0 20%;
            padding: 0;
            float: left;
        }

        #plain {
            width: 150px;
            height: 30px;
            margin: 2% 0 0 5%;
            padding: 0;
            float: left;
        }

        #float {
            width: 150px;
            height: 30px;
            margin: 2% 0 0 5%;
            padding: 0;
            float: left;
        }
    </style>
    <script>
        let count = 0;
        let plain_btn_on = false;
        let output_html1 = "<input class='search' id=\"search\" type=\"text\" placeholder='' ><br/>"
            + "<input id=\"btn1\" type=\"button\" value='图片1' style='background:cornflowerblue'><br/>"
            + "<input id=\"btn2\" type=\"button\" value='图片2' style='background:cornflowerblue'><br/>"
            + "<input id=\"btn3\" type=\"button\" value='图片3' style='background:cornflowerblue'><br/>"
            + "<input id=\"btn4\" type=\"button\" value='图片4' style='background:cornflowerblue'><br/>"
            + "<img id=\"lou\" src='lou.png' alt=''>";
        let output_html2 = "<input class='search' id=\"search\" type=\"text\" placeholder=''><br/>"
            + "<input id=\"btn1\" type=\"button\" value='图片1' style='background:blue'><br/>"
            + "<input id=\"btn2\" type=\"button\" value='图片2' style='background:blue'><br/>"
            + "<input id=\"btn3\" type=\"button\" value='图片3' style='background:blue'><br/>"
            + "<input id=\"btn4\" type=\"button\" value='图片4' style='background:blue'><br/>"
            + "<img id=\"lou\" src='lou.png' alt=''>";
        let output_html3 = "<img id=\"img0\" src=\"\" alt=\"\" style=''>";
        let output_img = "<img id=\"img1\" src=\"001.jpeg\" alt=\"\">"
            + "<img id=\"img2\" src=\"002.jpeg\" alt=\"\">"
            + "<img id=\"img3\" src=\"003.jpeg\" alt=\"\">"
            + "<img id=\"img4\" src=\"004.jpeg\" alt=\"\">";
        window.onload = function () {
            document.getElementById("PartA").innerHTML = output_html1;
            document.getElementById("PartB").innerHTML = output_html3;
            document.getElementById("PartC").innerHTML =
                "<div id='logo'>共达</div>"
                + "<button id=\"standard\" name=\"std_btn\">标准布局</button>"
                + "<button id=\"plain\" name=\"plain_btn\">窗口平铺</button>"
                + "<button id=\"float\" name=\"float_btn\">窗口浮动</button>";
            document.getElementById("btn1").onclick = changeImg1;
            document.getElementById("btn2").onclick = changeImg2;
            document.getElementById("btn3").onclick = changeImg3;
            document.getElementById("btn4").onclick = changeImg4;
            document.getElementById("standard").onclick = std_btn;
            document.getElementById("plain").onclick = plain_windows;
            document.getElementById("float").onclick = float_windows;
        };

        function changeImg1() {
            let obj = document.getElementById("img0");
            let obj1 = document.getElementById("img1");
            let btn_obj1 = document.getElementById("btn1");
            btn_obj1.style.background = (btn_obj1.style.background === "cornflowerblue none repeat scroll 0% 0%") ? "blue none repeat scroll 0% 0%" : "cornflowerblue none repeat scroll 0% 0%";
            if (obj) {
                obj.getAttribute("src") === "" ? obj.setAttribute("src", "001.jpeg") : obj.setAttribute("src", "");
            } else if (!obj && obj1) {
                obj1.getAttribute("src") === "" ? obj1.setAttribute("src", "001.jpeg") : obj1.setAttribute("src", "");
            }
        }

        function changeImg2() {
            let obj = document.getElementById("img0");
            let obj1 = document.getElementById("img2");
            let btn_obj2 = document.getElementById("btn2");
            btn_obj2.style.background = (btn_obj2.style.background === "cornflowerblue none repeat scroll 0% 0%") ? "blue none repeat scroll 0% 0%" : "cornflowerblue none repeat scroll 0% 0%";
            if (obj) {
                obj.getAttribute("src") === "" ? obj.setAttribute("src", "002.jpeg") : obj.setAttribute("src", "");
            } else if (!obj && obj1) {
                obj1.getAttribute("src") === "" ? obj1.setAttribute("src", "002.jpeg") : obj1.setAttribute("src", "");
            }
        }

        function changeImg3() {
            let obj = document.getElementById("img0");
            let obj1 = document.getElementById("img3");
            let btn_obj3 = document.getElementById("btn3");
            btn_obj3.style.background = (btn_obj3.style.background === "cornflowerblue none repeat scroll 0% 0%") ? "blue none repeat scroll 0% 0%" : "cornflowerblue none repeat scroll 0% 0%";
            if (obj) {
                obj.getAttribute("src") === "" ? obj.setAttribute("src", "003.jpeg") : obj.setAttribute("src", "");
            } else if (!obj && obj1) {
                obj1.getAttribute("src") === "" ? obj1.setAttribute("src", "003.jpeg") : obj1.setAttribute("src", "");
            }
        }

        function changeImg4() {
            let obj = document.getElementById("img0");
            let obj1 = document.getElementById("img4");
            let btn_obj4 = document.getElementById("btn4");
            btn_obj4.style.background = (btn_obj4.style.background === "cornflowerblue none repeat scroll 0% 0%") ? "blue none repeat scroll 0% 0%" : "cornflowerblue none repeat scroll 0% 0%";
            if (obj) {
                obj.getAttribute("src") === "" ? obj.setAttribute("src", "004.jpeg") : obj.setAttribute("src", "");
            } else if (!obj && obj1) {
                obj1.getAttribute("src") === "" ? obj1.setAttribute("src", "004.jpeg") : obj1.setAttribute("src", "");
            }
        }

        function std_btn() {
            plain_btn_on = false;
            document.getElementById("PartA").innerHTML = output_html1;
            document.getElementById("PartB").innerHTML = "<img id=\"img0\" src=\"\" alt=\"\" style=''>";
            document.getElementById("btn1").onclick = changeImg1;
            document.getElementById("btn2").onclick = changeImg2;
            document.getElementById("btn3").onclick = changeImg3;
            document.getElementById("btn4").onclick = changeImg4;
        }

        function plain_windows() {
            plain_btn_on = true;
            document.getElementById("PartB").innerHTML = output_img;
            document.getElementById("btn1").onclick = changeImg1;
            document.getElementById("btn2").onclick = changeImg2;
            document.getElementById("btn3").onclick = changeImg3;
            document.getElementById("btn4").onclick = changeImg4;
            count++;
        }

        function float_windows() {
            plain_btn_on = false;
            document.getElementById("PartA").innerHTML = output_html2;
            document.getElementById("PartB").innerHTML = "<img id= 'float_bg' src='float_bg.png' alt=''>";
            let obj5 = window.open("001.jpeg", "newwindow1", "height=100,width=200,top=0,left=1380,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no");
            let obj6 = window.open("002.jpeg", "newwindow2", "height=100,width=200,top=200,left=1380,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no");
            let obj7 = window.open("003.jpeg", "newwindow3", "height=100,width=200,top=400,left=1380,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no");
            let obj8 = window.open("004.jpeg", "newwindow4", "height=100,width=200,top=600,left=1380,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no");
        }
    </script>
</head>
<body>
<div id="PartA"></div>
<div id="PartB"></div>
<div id="PartC"></div>
</body>
</html>